<template>
	<div class="dashboard">
		<el-row :gutter="15">
			<el-col :span="7">
				<EhCard title="分类商品数量(饼图)">
					<PieEchart :pieData="categoryGoodsCount"></PieEchart>
				</EhCard>
			</el-col>
			<el-col :span="10">
				<EhCard title="不同城市商品数量">
					<MapEchart :mapData="addressGoodsSale"></MapEchart>
				</EhCard>
			</el-col>
			<el-col :span="7"
				><EhCard title="分类商品数量(玫瑰图)"
					><RoseEchart :roseData="categoryGoodsCount"></RoseEchart></EhCard
			></el-col>
		</el-row>
		<el-row :gutter="15" class="content-row">
			<el-col :span="12">
				<EhCard title="分类商品的销量">
					<LineEchart v-bind="categoryGoodsSale"></LineEchart>
				</EhCard>
			</el-col>
			<el-col :span="12">
        <EhCard title="分类商品的收藏">
          <BarEchart v-bind="categoryGoodsFavor"></BarEchart>
        </EhCard>
      </el-col>
		</el-row>
	</div>
</template>

<script lang="ts">
	import { defineComponent, computed } from 'vue'
	import { useStore } from 'vuex'

	import EhCard from '@/base-ui/card'
	import { PieEchart, RoseEchart, LineEchart ,BarEchart,MapEchart} from '@/components/page-echarts'

	export default defineComponent({
		name: 'dashboard',
		components: {
			EhCard,
			PieEchart,
			RoseEchart,
			LineEchart,
      BarEchart,
      MapEchart
		},
		setup() {
			const store = useStore()
			store.dispatch('dashboardModule/getDashboardDataAction')

			const categoryGoodsCount = computed(() =>
				store.state.dashboardModule.categoryGoodsCount.map((item: any) => {
					return { name: item.name, value: item.goodsCount }
				})
			)
			const categoryGoodsSale = computed(() =>{
				const xLabels:string[] = []
        const yLabels:any[] = []
        const categoryGoodsSale = store.state.dashboardModule.categoryGoodsSale
        categoryGoodsSale.forEach((item:any)=>{
          xLabels.push(item.name)
          yLabels.push(item.goodsCount)
        })
        return {xLabels,yLabels}
      }
			)

			const categoryGoodsFavor = computed(() => {
        const xLabels:string[] = []
        const values:any[] = []
        const categoryGoodsFavor = store.state.dashboardModule.categoryGoodsFavor
        categoryGoodsFavor.forEach((item:any)=>{
          xLabels.push(item.name)
          values.push(item.goodsFavor)
        })
        return {xLabels,values}
      }
			)
			const addressGoodsSale = computed(
				() => store.state.dashboardModule.addressGoodsSale.map((item:any)=>{
          return {
            name:item.address,
            value:item.count
          }
        })
			)

			return {
				categoryGoodsCount,
				categoryGoodsSale,
				categoryGoodsFavor,
				addressGoodsSale
			}
		}
	})
</script>

<style scoped>
	.content-row {
		margin-top: 20px;
	}
</style>
